<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>VNode</title>
</head>

<body>
  <p>在Vue.js中存在一个VNode类,使用它可以实例化不同的vnode实例。而不同类型的vnode实例各自表示不同类型的DOM元素</p>
  <p>例如DOM元素有元素节点、文本节点和注释节点等，vnode实例也会对应着有元素节点、文本节点和注释节点等。</p>
  <p>总结:</p>
  <p>Vnode式一个类,可以生成不同类型的vnode实例,不同类型的vnode用来生成不同的真实dom</p>
  <p>vnode有多种类型,本质上式一样的都是由VNode类实例化出来的对象,最大的不同就是属性不同</p>
  <script>
    // VNode类代码
    class VNode {
      constructor(tag, data, children, text, elm, context, componentOptions, asyncFactory) {
        this.tag = tag;
        this.data = data;
        this.children = children;
        this.text = text;
        this.elm = elm;
        this.context = context;
        this.functionalContext = undefined;
        this.functionalOptions = undefined;
        this.functionalScopeId = undefined;
        this.key = data && data.key;
        this.componentOptions = componentOptions;
        this.parent = undefined;
        this.raw = false;
        this.isStatic = false;
        this.isRootInsert = true;
        this.isComment = false;
        this.isCloned = false;
        this.isOnce = false;
        this.asyncFactory = asyncFactory;
        this.asyncMeta = undefined;
        this.isAsyncPlaceholder = false;
      }
      get child() {
        return this.componentInstance
      }
    }
  </script>
</body>

</html>